import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/views/Home";
import Index from "@/views/Index";
import User from "@/views/sys/User";
import Role from "@/views/sys/Role";
import Menu from "@/views/sys/Menu";

import axios from "../axios";
import store from "../store";
Vue.use(VueRouter)


const routes = [
  {path:'/',redirect:'/login'},
  {
    path: '/',
    name: 'Home',
    component: Home,
    children:[
      {
        path: '/index',
        name: 'Index',
        meta:{
          title: '主页'
        },
        component: Index,
      },
      {
        path: '/userCenter',
        name: 'UserCenter',
        meta:{
          title: '个人中心'
        },
        component:  () => import('../views/UserCenter.vue')//懒加载  先渲染父级路径在渲染子级路径
      },
      // {
      //   path: '/sys/users',
      //   name: 'SysUser',
      //   component: User
      // },
      // {
      //   path: '/sys/roles',
      //   name: 'SysRole',
      //   component: Role
      // },
      // {
      //   path: '/sys/menus',
      //   name: 'SysMenu',
      //   component: Menu
      // },

    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

//路由的动态绑定  用于权限管理
router.beforeEach((to,from,next) =>{

  //hasRoute 判断有没有获取路由
  let hasRoute = store.state.menus.hasRoutes

  let token = localStorage.getItem("token")

  if (to.path == '/login') {
    next()

  } else if (!token) {
    next({path: '/login'})


  } else if(token && !hasRoute) {
    axios.get("/sys/menu/nav", {
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }).then(res => {

      console.log(res.data.data)

      // 拿到menuList
      store.commit("setMenuList", res.data.data.nav)

      // 拿到用户权限
      store.commit("setPermList", res.data.data.authoritys)

      console.log(store.state.menus.menuList)

      // 动态绑定路由
      let newRoutes = router.options.routes

      res.data.data.nav.forEach(menu => {
        if (menu.children) {

          menu.children.forEach(e => {

            // 转成路由
            let route = menuToRoute(e)

            // 吧路由添加到路由管理中
            if (route) {
              //通过数组的下标放入  我的路由Home对应的是第二个下标
              newRoutes[1].children.push(route)
            }

          })
        }
      })

      console.log("newRoutes")
      console.log(newRoutes)
      router.addRoutes(newRoutes)

      hasRoute = true
      store.commit("changeRouteStatus", hasRoute)
    })
  }
  next()
})


// 导航转成路由
const menuToRoute = (menu) => {

  if (!menu.component) {
    return null
  }

  let route = {
    name: menu.name,
    path: menu.path,
    meta: {
      icon: menu.icon,
      title: menu.title
    }
  }
  route.component = () => import('@/views/' + menu.component +'.vue')

  return route
}

export default router
